<template>
  <div class="searchInfo">
    <p class="close">
      <van-icon name="cross" size="20px" @click="Back" />
    </p>
    <h2>今天想找什么？</h2>
  </div>
  <input
    type="text"
    placeholder="写上你所爱的商品，我来帮您搜"
    class="searchIpt"
    v-model="Ipt"
  />
  <van-icon
    name="search"
    size="30"
    class="search"
    color="black"
    @click="search"
  />
  <div class="hotSearch">
    <p>热门搜索</p>
    <ul>
      <li v-for="item in hotSearch" :key="item" @click="dump(item)">
        {{ item }}
      </li>
    </ul>
  </div>
  <div class="oldList">
    <p>历史记录</p>
    <ul>
      <li
        v-for="(item, index) in oldList2.oldList"
        :key="item"
        @click="dump(item, index)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useSearchStore } from "@/stores/search.js";
//返回上一页
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
const oldList2 = useSearchStore();
const router = useRouter();
function Back() {
  router.back();
}
// 模拟数据
const hotSearch = reactive(["球鞋", "韩范", "猫爪杯", "衬衫", "电动牙刷"]);
// const oldList =  oldList2.oldList;
const Ipt = ref("");
// 将搜索内容添加到历史记录数组中
function search() {
  const inputInfo = Ipt.value;

  oldList2.oldList.forEach(() => {
    if (oldList2.oldList.indexOf(inputInfo) === -1) {
      oldList2.oldList.push(inputInfo);
    }
  });
  router.push("/searchSon");
}
// 点击跳转到带有搜索关键词的商品页
function dump(item, index) {
  oldList2.oldList.forEach(() => {
    if (oldList2.oldList.indexOf(item) === -1) {
      oldList2.oldList.push(item);
    } else {
      oldList2.oldList.forEach(() => {
        if (oldList2.oldList.indexOf(item) !== -1) {
          oldList2.oldList.splice(index, 0);
        }
      });
      oldList2.oldList[oldList2.oldList.length - 1] = item;
    }
  });
  router.push("/searchSon");
}
</script>

<style lang="less" scoped>
.searchInfo {
  margin: 0vw 3.667vw;
  overflow: hidden;
  position: relative;
  .close {
    margin-top: 4.667vw;
  }
  h2 {
    font-weight: bold;
    margin-top: 2.667vw;
    animation: move linear 0.5s;
  }
  @keyframes move {
    0% {
      transform: translateX(-200px);
    }
    100% {
      transform: translateX(0px);
    }
  }
}
@keyframes move3 {
  0% {
    position: absolute;
    top: 50.667vw;
    left: 1.333vw;
  }
  100% {
    position: absolute;
    top: 26.667vw;
    left: 1.333vw;
  }
}
.searchIpt {
  font-size: 1.6vw;
  position: absolute;
  margin-left: 2.333vw;
  top: 50.667vw;
  width: 45.667vw;
  padding-bottom: 1.333vw;
  border-bottom: 0.067vw solid gray;
  animation: move3 linear 0.3s;
  animation-fill-mode: forwards;
}
.search {
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 6.667vw;
  animation: move2 0.2s linear;
  animation-fill-mode: forwards;
}
@keyframes move2 {
  0% {
    position: absolute;
    right: 0;
    top: 6.667vw;
  }
  100% {
    position: absolute;
    right: 40.333vw;
    top: 23.8vw;
  }
}
.hotSearch {
  position: absolute;
  top: 90vw;
  left: 2.333vw;
  animation: move4 0.4s linear;
  animation-fill-mode: forwards;
  p {
    font-size: 3.8vw;
    margin-bottom: 4.333vw;
  }
  ul {
    width: 80vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    li {
      font-size: 1.333vw;
      color: red;
      background-color: rgb(255, 235, 237);
      margin-right: 4.667vw;
      margin-bottom: 5.333vw;
      padding: 1vw 3vw;
      border-radius: 0.667vw;
    }
  }
}
@keyframes move4 {
  0% {
    position: absolute;
    top: 90vw;
    left: 2.333vw;
  }
  100% {
    position: absolute;
    top: 38vw;
    left: 2.333vw;
  }
}
.oldList {
  position: absolute;
  top: 130vw;
  left: 2.333vw;
  animation: move5 0.5s linear;
  animation-fill-mode: forwards;
  p {
    font-size: 3.8vw;
    margin-bottom: 4.333vw;
  }
  ul {
    width: 80vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    li {
      font-size: 1.333vw;
      background-color: rgb(242, 242, 242);
      margin-right: 4.667vw;
      margin-bottom: 5.333vw;
      padding: 1vw 3vw;
      border-radius: 0.667vw;
    }
  }
}
@keyframes move5 {
  0% {
    position: absolute;
    top: 130vw;
    left: 2.333vw;
  }
  100% {
    position: absolute;
    top: 72vw;
    left: 2.333vw;
  }
}
</style>
